import { Flex, Typography } from "antd";
import React from "react";
import styles from "./BdTieBaCard.module.css";
import { formatNumberToWan } from "../Common/commonData";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";
const { Text, Title } = Typography;

export function BdTieBaCard({ item = {}, style = {} }) {
  const { listDisplay, openInNewWindow } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;

  return (
    <Flex
      style={{
        backgroundColor: "white",
        boxShadow:
          "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        borderRadius: 8,
        padding: 8,

        ...style,
      }}
      gap={16}
      align="flex-start">
      <Flex flex={1} gap={12}>
        {isImageEnabled && (
          <a
            href={item.url}
            target={target}
            style={{
              flexShrink: 0,
            }}>
            <div
              style={{
                position: "relative",
              }}>
              <ProxyImage
                originalUrl={item?.extra_content?.photo_url}
                style={{
                  height: "84px",
                  width: "88px",
                  objectFit: "cover",
                  borderRadius: 4,
                }}
              />
              <Text
                className={`${styles.order} ${styles[`order-${item.order}`]}`}
                strong>
                {item.order}
              </Text>
            </div>
          </a>
        )}

        <Flex vertical style={{ flex: 1, minWidth: 0 }}>
          <a
            href={item.url}
            target={target}
            style={{ textDecoration: "none" }}
            className={styles["content-link"]}>
            <Title
              className={styles.title}
              level={5}
              ellipsis={{ rows: 2 }}
              style={{ margin: 0, lineHeight: 1.3 }}>
              {item.title}
            </Title>

            <Typography.Paragraph
              type="secondary"
              ellipsis={{ rows: 2 }}
              style={{ marginTop: 4, fontSize: 13, maxWidth: "40rem" }}>
              {item.extra_content.intro}
            </Typography.Paragraph>
          </a>
        </Flex>

        <Flex vertical justify="center" align="center" style={{ minWidth: 60 }}>
          <Text strong>{formatNumberToWan(item.extra_content.hot)}</Text>
          <Text type="secondary" style={{ fontSize: 12 }}>
            热度
          </Text>
        </Flex>
      </Flex>
    </Flex>
  );
}
